<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录页</title>
    <style>

        body {
            margin: 0;
            padding: 0;
            font-size: 16px;
            word-wrap: break-word;
            color: #333;
            font-family: "microsoft yahei", "宋体";
            background: #0765d1;
        }

        img {
            border: 0;
            cursor: pointer;
            margin-top: 5px;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        a:hover {
            text-decoration: none;
            color: #0765d1;
        }

        /* End hide from IE-mac */

        .login {
            width: 437px;
            margin: 120px auto;
        }

        .login .title {
            padding: 0 5px 0;
            margin: 20px 28px 45px;
            line-height: 1px;
            border-left: 75px solid #5d9bec;
            border-right: 75px solid #5d9bec;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }


        .login .panel {
            background: #fff;
            width: 437px;
            padding: 1px 0 20px;
            position: relative;
        }

        .login .user_pic {
            margin: 16px 0 12px;
            text-align: center;
        }

        .login .user_pic img {
            border-radius: 50%;
            border: #e6e6e6 1px solid;
        }

        .btn_login {
            width: 100px;
            margin-top: 10px;
            margin-left: 170px;
            display: block;
            height: 38px;
            line-height: 38px;
            text-align: center;
            color: #fff;
            font-size: 16px;
            background: #468ae4;
            border: 1px solid #327bdb;
            -webkit-transition: all .24s;
            -moz-transition: all .24s;
            -ms-transition: all .24s;
            -o-transition: all .24s;
            transition: all .24s;
        }

        label {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-top: 5px;
            margin-right: 10px;
            margin-left: 10px;
            font-size: 14px;
        }

        input {
            width: 200px;
            margin-top: 5px;
        }
    </style>
    <%@ include file="/WEB-INF/pages/common/common.jsp" %>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/md5.js"></script>
</head>

<body>

<div class="login">
    <div class="title">欢迎登录后台</div>
    <div class="panel">
        <div class="caret_up"></div>
        <div class="user_pic"><img src="${pageContext.request.contextPath}/static/images/headImg.jpg"></div>
        <div class="form" id="loginForm" >
            <form id="saveData" method="post">
                <div>
                    <label>账号：</label>
                    <input id="loginName" type="text" class="easyui-validatebox easyui-textbox" required="true"
                           data-options="required:true,validType:'length[3,20]',invalidMessage:'至少3个字符'"/>
                </div>
                <div>
                    <label>密码：</label>
                    <input id="loginPassword" type="password" class="easyui-validatebox easyui-textbox"
                           required="true" data-options="required:true,validType:'length[6,20]',invalidMessage:'至少6个字符'"/>
                </div>
                <div>
                    <label>验证码：</label>
                    <input id="imageCode" type="text" class="easyui-validatebox easyui-textbox" required="true" data-options="required:true,validType:'length[4,5]',invalidMessage:'4个字符'"/>
                    <img id="code" src="${pageContext.request.contextPath}/image/getRandCode"
                         onclick="this.src='${pageContext.request.contextPath}/image/getRandCode?t=' + (new Date()).getTime() ">
                </div>
                <div class="btn">
                    <a href="javascript:void(0)" class="btn_login" onclick="btnLogin()" style="width:90px">登 录</a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="application/javascript">

    function btnLogin() {
        $('#saveData').form('submit', {
            onSubmit: function(){
                let check =  $(this).form('enableValidation').form('validate');
                if(check){
                    let param = {
                            loginName: $("#loginName").val(),
                            loginPassword: md5($("#loginPassword").val()),
                            imageCode: $("#imageCode").val(),
                        };
                    $.ajax({
                        type: "POST",
                        async: false,
                        cache: false,
                        dataType: "json",
                        data: JSON.stringify(param),
                        contentType: "application/json; charset=utf-8",
                        url: "${pageContext.request.contextPath}/admin/doLogin",
                        success: function (resp) {
                            if(resp.code==0){
                                window.location.href="${pageContext.request.contextPath}/admin/index";
                            }else{
                                $.messager.alert('Warning','执行出错了,state:'+resp.msg);
                                $("#code").attr("src","${pageContext.request.contextPath}/image/getRandCode?t=" + (new Date()).getTime() )
                            }
                        },
                        error:function(err){
                            console.log(err);
                        },

                    });
                }
                return false;
            },
        });
    }
</script>
</html>
